<template>
	<div class="page">
		<div class="editor-content">
			<div class="editor-title">
				<el-form ref="article" :model="article" label-width="70px" style="text-align: left;">
				<el-form-item label="标题">
					<el-input v-model="article.title"  placeholder="标题"></el-input>
				</el-form-item>
				<el-form-item label="软文类型">
					<el-select v-model="article.type"  placeholder="请选择软文类型">
						<el-option v-for="item in roles" :key="item.enumCode" :label="item.enumName" :value="item.enumCode">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="描述">
					<el-input type="textarea" rows="4" placeholder="描述信息" v-model="article.desc"></el-input>
				</el-form-item>
			</el-form>
				<div slot="footer" class="dialog-footer" style="text-align: center;">
					<el-button type="primary" @click="submitForm()" size="small" :loading="newSaveButtonStatus">提交</el-button>
					<el-button type="primary" @click="preview()" size="small">预览</el-button>
				</div>
			</div>
			<div class="quill">
				<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
				</quill-editor>
			</div>
		</div>
		<el-dialog title="软文预览" :visible.sync="dialogVisible">
			<div v-html="content" class="preview"></div>
		</el-dialog>
	</div>

</template>
<style>
	@import url("../../../common/common.css");
	@import url("quillEditor.css");
</style>
<script>
	import $ from 'jquery'
	import { quillEditor, Quill } from 'vue-quill-editor'
	import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
	Quill.register('modules/ImageExtend', ImageExtend)

	export default {
		data() {
			return {
				roles:[],
				article:{
					title:'',
					desc:''
				},
				dialogVisible:false,
				newSaveButtonStatus:false,
				content: '<p>example content</p>',
				editorOption: {
					modules: {
						ImageExtend: {
							loading: true,
							name: 'file',
							action: this.utils.rootUrl + 'upload/uploadFile',
							response: (res) => {
								return this.utils.imageRootUrl + res.data.httpUrl
							}
						},
						toolbar: { // 如果不上传图片到服务器，此处不必配置
							container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
							handlers: {
								'image': function() { // 劫持原来的图片点击按钮事件
									QuillWatch.emit(this.quill.id)
								}
							}
						}
					}
				}
			}
		},
		created() {
			this.getRoleList();
		},
		mounted() {
			setTimeout(() => {
				this.content = 'i am changed'
			}, 3000)
		},
		methods: {
			onEditorBlur() { //失去焦点事件
			},
			onEditorFocus() { //获得焦点事件
			},
			onEditorChange() { //内容改变事件
			},
			preview(){
				this.dialogVisible = true;
			},
			submitForm(){
				this.newSaveButtonStatus = true;
				this.article['content'] = this.content;
				var _self = this;
				this.utils.ajaxJSON({
					type:'post',
					url:'article/',
					data:_self.article,
					success:function(res){
						_self.newSaveButtonStatus = false;
						_self.$message({
							type: 'success',
							message: '操作成功!'
						});
					}
				})
			},
			getRoleList: function() {
				var _self = this;
				_self.utils.ajaxJSON({
					type: 'POST',
					url: 'enum/enumList',
					data: {
						parentCode:'llz08'
					},
					success: function(res) {
					  console.log(res);
						if(res.status == 200) {
							_self.roles = res.dataList;
						}
					}
				});
			}
		}
	}
</script>